<template>
  <div>
    <div class="row">
      <div class="col-lg-4"><h3 class="text-primary">各省农业新闻</h3></div>
      <div class="col-lg-2"><h5 class="text-success">选择省份:</h5></div>
      <div class="col-lg-4">
        <form>
          <div class="mb-3">
            <select
              class="form-select"
              aria-label="Default select example"
              v-model="getProvince"
              v-on:change="getNews()"
            >
              <option v-for="p in provinces" :key="p" :value="p">
                {{ p }}
              </option>
            </select>
          </div>
        </form>
      </div>
    </div>
    <div>
      <div class="row" v-show="showNoData">
        <div class="col-lg-4"></div>
        <div class="col-lg-6">
          <br /><br /><br /><br />
          <h3 class="text-primary align-center">暂无新闻</h3>
        </div>
      </div>

      <div class="table-responsive" v-show="showNews">
        <table class="table table-striped table-sm">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">标题</th>
              <th scope="col">来源</th>
              <th scope="col">日期</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="index in range(start, end)" :key="index">
              <td>{{ index + 1 }}</td>
              <td>
                <router-link
                  :to="{
                    path: '/governmentNewsPage',
                    query: {
                      title: title[index],
                      source: source[index],
                      date: date[index],
                      url: url[index],
                    },
                  }"
                  class="btn"
                  >{{ title[index] }}</router-link
                >
              </td>
              <td>{{ source[index] }}</td>
              <td>{{ date[index] }}</td>
            </tr>
          </tbody>
        </table>
        <div class="row">
          <div class="col-lg-5"></div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageReduce()">
                上一页
              </button>
            </h5>
          </div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageAdd()">
                下一页
              </button>
            </h5>
          </div>
          <div class="col-lg-5"></div>
        </div>
      </div>
    </div>
  </div>
</template>

       

<script>
export default {
  data() {
    return {
      title: [],
      source: [],
      date: [],
      url: [],
      getProvince: "北京",
      start: 0,
      end: 0,
      begin: 0,
      part: 0,
      pageNum: 8,
      dataLength: 0,
      showNews: false,
      showNoData: true,
      provinces: [
        "山东",
        "江苏",
        "安徽",
        "浙江",
        "福建",
        "上海",
        "广东",
        "广西",
        "海南",
        "湖北",
        "湖南",
        "河南",
        "江西",
        "北京",
        "天津",
        "河北",
        "山西",
        "内蒙古",
        "宁夏",
        "新疆",
        "青海",
        "陕西",
        "甘肃",
        "四川",
        "云南",
        "贵州",
        "西藏",
        "重庆 ",
        "辽宁",
        "吉林",
        "黑龙江",
      ],
    };
  },
  methods: {
    getNews() {
      this.title = [];
      this.source = [];
      this.date = [];
      this.url = [];

      this.axios
        .get(
          "http://122.51.157.58:8081/api-service/getAgriNyywInfoByProvince?key=123456&province=" +
            this.getProvince
        )
        .then((body) => {
          var result = body.data;
          this.dataLength = result.data.result.length;
          if (this.dataLength == 0) {
            this.showNoData = true;
            this.showNews = false;
          } else {
            this.showNoData = false;
            this.showNews = true;
          }
          for (var i = 0; i < result.data.result.length; i++) {
            this.title.push(result.data.result[i].title);
            this.source.push(result.data.result[i].source);
            this.date.push(result.data.result[i].date);
            this.url.push(result.data.result[i].url);
          }
          this.part = Math.floor(result.data.result.length / this.pageNum);
          if (this.part == 0) {
            this.end = this.data.length;
          } else {
            this.end = this.pageNum;
          }
        });
    },
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
    pageAdd() {
      var gap = this.dataLength - this.end;
      if (gap >= this.pageNum) {
        this.start += this.pageNum;
        this.end += this.pageNum;
      } else if (this.end != this.dataLength) {
        this.start += this.pageNum;
        this.end = this.dataLength;
      }
    },
    pageReduce() {
      if (this.end == this.dataLength) {
        this.start -= this.pageNum;
        this.end = this.part * this.pageNum;
      } else if (this.start != 0) {
        this.start -= this.pageNum;
        this.end -= this.pageNum;
      }
    },
  },
  mounted() {
    this.getNews();
  },
};
</script>